import React, {FC} from 'react';
import "./index.less";
import {useRequest} from "ahooks";
import * as API from "@/services";
import SysMsgItem from "@/pages/MinePage/SysMsg/SysMsgItem";
import {readNotifyRemind} from "@/services";
import HxPagination from "@/components/HxPagination";
import {Empty} from "antd";

interface SysMsgUnreadProps {
}

/**
 * 未读消息 页面
 */
const SysMsgUnread: FC<SysMsgUnreadProps> = (props) => {

  const recordsReq = useRequest((p) => API.queryNotifyRemind({
    pageSize: 20,
    ...p,
    status: "UNREAD",
  }), {
    refreshDeps: []
  });

  const readReq = useRequest((itemId: API.EntityId) => API.readNotifyRemind(itemId), {
    manual: true,
  });

  const records = recordsReq.data?.data || [];

  return (
    <div className={"sys-msg-container sys-msg-unread-container"}>
      {
        records.length > 0 ? (
          records.map((record) => {
            return <SysMsgItem item={record} onClick={(item) => {
              readReq.runAsync(item.id).then(resp => {
                if (resp.flag) {
                  recordsReq.refresh();
                }
              });
            }}/>
          })
        ) : (
          <Empty/>
        )
      }
      {
        recordsReq.data && (
          <div className={"hx-pagination-wrapper"}>
            <HxPagination size="small"
                          total={recordsReq.data?.total}
                          current={recordsReq.data.current}
                          pageSize={recordsReq.data.pageSize}
                          onChange={(pageNum, pageSize) => {
                            recordsReq.run({
                              page: pageNum,
                              pageSize
                            })
                          }}
            />
          </div>
        )
      }
    </div>
  );
};

export default SysMsgUnread;
